// 调试样式
// * {
// 	border: 1px solid #fff;
// }

// 容器
html {
	position: relative;
	background-color: #fff;
	padding: 1rem 2rem;
}

body {
	margin: auto;
}

hr {
	border-style: solid;
	margin: 1.5rem 0;
}

// 导航

.title_site {
	padding: 1rem 0;

	a {
		height: 2rem;
		font-size: 2rem;
		line-height: 2rem;
		font-weight: 700;
	}
}

.nav_main {
	padding-bottom: 1rem;

	ul {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;

		li {
			padding-right: 1.2rem;

			a {
				font-size: 1.2rem;
			}
		}
	}
}

.bcnav {
	padding-bottom: 1rem;
	font-size: 1.2rem;
}

// 目录
.index li {
	height: 2rem;
	line-height: 2rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	> span {
		white-space: nowrap;
	}

	strong {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	a {
		height: 2rem;
		line-height: 2rem;
		font-size: 1.2rem;
	}
}


// 正文样式
h1 {
	font-size: 2rem;
	line-height: 2rem;
	font-weight: 700;
	padding: 0.5rem 0;

	&::before {
		content: "# ";
		color: #ccc;
	}
}

h2 {
	font-size: 1.4rem;
	line-height: 1.4rem;
	font-weight: 700;
	padding: 0.5rem 0;

	&::before {
		content: "## ";
		color: #ccc;
	}
}

h3 {
	font-size: 1.2rem;
	line-height: 1.2rem;
	font-weight: 700;
	padding: 0.5rem 0;

	&::before {
		content: "### ";
		color: #ccc;
	}
}

h4 {
	font-size: 1.1rem;
	line-height: 1.1rem;
	font-weight: 700;
	padding: 0.5rem 0;

	&::before {
		content: "#### ";
		color: #ccc;
	}
}

p {
	font-size: 1rem;
	padding: 0;
	margin: 0.8rem 0;
	word-wrap: break-word;
	line-height: 1.5em;

}

[class^="outline-"] ul {
	list-style: circle;
	margin: 0.8rem 1.5rem;
	padding: 0;

	li {
		line-height: 1.5rem;
		font-size: 1rem;
		padding-left: 0.2rem;

		p {
			margin: 0;
		}

		ul {
			margin: auto 1rem;
		}

		// &::before {
		// 	content: "- ";
		// }
	}
}

img,
iframe,
video {
	max-width: 100%;
}
// 引用样式
blockquote {
	background: #f9f9f9;
	border-left: 5px solid #ccc;
	padding: 1rem;
}

// 表格样式
#container > div > div:has(> table) {
	overflow: auto;
}
#container > div > div > table {
	border-collapse: collapse;
	margin: 1rem 0;
	overflow-x: visible;

	tr {
		background: #fff;
		
		&:nth-child(even) {
			background: #fafafa;
		}

		&:hover {
			background: #e8f0fe;
		}
	}

	th, td {
		padding: 0.6em 1em;
		text-align: left;
		border: 1px solid #e0e0e0;
		vertical-align: top;

		&::selection {
			background: #b3d4fc;
			color: #000;
		}
	}

	th {
		background: #f8f8f8;
		color: #333;
		font-weight: bold;
		white-space: nowrap;
	}
}

// 代码块
.highlight {

	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 2px 2px 5px 1px #eee;
	margin: 0.8rem 0.5rem;

	div {
		border-radius: 8px;
	}

	table {
		table-layout: fixed;
		width: 100%;
		background: none;
		border: none;

		tr {
			border-radius: 8px;
			position: relative;

			.copy_code {
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				background-color: #ddd;
				border: none;
				border-radius: 4px;
				padding: 0.2rem 0.4rem;
				cursor: pointer;
				font-size: 0.8rem;
				z-index: 1;
				user-select: none;
				visibility: hidden;
				box-shadow: 1px 1px 2px 1px #eee;
			}
		}

		td {
			height: 1.5rem;
			line-height: 1.5rem;
			vertical-align: middle !important;
		}
		
		pre {
			border-radius: 8px;
			white-space: nowrap;

			code {
				font-family: "文泉驿等宽微米黑", "文泉驿等宽正黑", "Noto Sans Mono CJK SC", "Noto Sans Mono", "Hack", "Source Code Pro", "DejaVu Sans Mono";
				font-size: 90%;
				height: 1.5rem;
				line-height: 1.5rem;
			}
		}

		td:first-of-type {
			user-select: none;
			border-right: #ddd solid 1px !important;
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
			width: 2rem;
			background-color: #fff;
			padding-bottom: 0.3rem !important;
			position: relative;
			
			pre {
				overflow: hidden;
				vertical-align: middle;
				height: 100%;
				// position: relative;
				position: absolute;
				top: 0;
				transform: translateX(-50%);
				left: 50%;

				background-color: #fff !important;
				
				code {
					// height: 1.5rem;
					// position: absolute;
					// left: 50%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					padding-top: 0.5rem;
					padding-left: 1px;
				}

				span {
					text-align: center;
					height: 1.5rem;
					line-height: 1.5rem;
					margin: 0 !important;
				}
			}
		}

		td:not(:first-of-type) {
			background-color: #f8f8f8;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
				
			pre {
				background-color: transparent !important;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				height: max-content;
				width: 100%;
				padding: 0.5rem 1rem 0.5rem 0.5rem !important;
				// td在Firefox中无法滚动，这里必须使pre滚动
				position: relative;
				overflow-x: auto;
				scrollbar-gutter: stable;
				// 使用scrollbar-width样式就无法使用以下自定义样式，但以下自定义样式不支持firefox，更美观的滚动条可以通过js实现
				scrollbar-width: thin;
				// &::-webkit-scrollbar-track {
				// 	background-color: transparent;
				// 	border-radius: 8px;
				// 	visibility: hidden;
				// }
				// &::-webkit-scrollbar-thumb {
				// 	background-color: #999;
				// 	border-radius: 5px;
				// 	box-shadow: inset 0 0 5px transparent;
				// 	visibility: hidden;
				// }
				// &::-webkit-scrollbar {
				// 	height: 0.3rem;
				// 	width: 1rem;
				// 	visibility: hidden;
				// }
	
				// &::-webkit-scrollbar-corner {
				// 	background-color: transparent;
				// 	visibility: hidden;
				// }
	
				// &:hover {
					
					// &::-webkit-scrollbar-thumb {
					// 	visibility: visible;
					// }
					
					// &::-webkit-scrollbar-track {
					// 	visibility: visible;
					// }
				// }
				code {
					background-color: #f8f8f8;
					border-top-right-radius: 8px;
					border-bottom-right-radius: 8px;
					width: max-content;
					white-space: pre;
					overflow: visible;

					> span {
						padding-right: 3.5rem;
						width: max-content;
					}
				}
			
			}
		}
	}
}

// 行内代码样式
p > code {
	background-color: #e4e6ea;
	padding: 0.1rem 0.5rem;
	margin: 0 0.2rem;
	border-radius: 4px;
	font-family: "文泉驿等宽微米黑", "文泉驿等宽正黑", "Noto Sans Mono CJK SC", "Noto Sans Mono", "Hack", "Source Code Pro", "DejaVu Sans Mono";
	font-size: 90%;
	height: 1.5rem;
	line-height: 1.5rem;
	position: relative;

	.copy_code {
		position: absolute;
		top: 0.1rem;
		right: 0.4rem;
		background-color: #fff;
		opacity: 0.7;
		border: #000 solid 0.5px;
		border-radius: 2px;
		padding: 0.1rem 0.2rem;
		cursor: pointer;
		font-size: 0.5rem;
		z-index: 1;
		user-select: none;
		visibility: hidden;
		box-shadow: 1px 1px 1px #eee;
	}
}

// 非标样式
// 将删除线渲染为黑幕
del,
del code {
	color: #252525;
	text-shadow: none;
	text-decoration-line: none;
	background-color: #252525;
	vertical-align: baseline;
}

del:hover,
del:hover code {
	transition: color .13s linear;
	color: white;
}

// 发行的正文样式
#container > p{
	text-indent: 2rem;

	+ ul {
		margin: auto 3.5rem;
	}
}